<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>我是div</div>
    <div class="nav">woshi nav div</div>
    <p>我是P标签</p>
    <ol>
        <li src="item">我是ol 的 li</li>
        <li>我是ol 的 li</li>
        <li>我是ol 的 li</li>
        <li>我是ol 的 li</li>
        <li>我是ol 的 li</li>
    </ol>
    <ul>
        <li>我是ul 的 li</li>
        <li>我是ul 的 li</li>
        <li>我是ul 的 li</li>
        <li>我是ul 的 li</li>
        <li>我是ul 的 li</li>
        <li>我是ul 的 li</li>
    </ul>
    <div>很惊喜，很意外</div>
    <div>很惊喜，很意外</div>
    <div>很惊喜，很意外</div>
    <div>很惊喜，很意外</div>

    <div class="grandfa">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>

    <div class="nav">
        <p>这是p</p>
        <div>
            <p>子 p标签</p>
        </div>
    </div>
    <script>
        // $(function() {
        //     $('.nav') // 获取选择器
        //     $('ul li') // 多个选择器
        // })


        // 隐式迭代
        //  1. 获取多个div元素
        // console.log($('div'));
        // //  2. 给四个div设置背景颜色为粉色  jQuery对象不能使用style
        // $('div').css('background', 'pink');  
        // //  3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
        // $('ul li').css('color', 'red');
        
        // 筛选选择器
        $(function() {
            // 获取第一个元素标签
            $('ul li:first').css('color', 'blue');
            // 获取最后一个元素标签
            $('ul li:last').css('color', 'blue');
            // 获取第n个元素标签  eg： n = 2
            $('ul li:eq(2)').css('color', 'green');
            // 获取索引号为奇数的元素
            $('ul li:odd').css('color', 'yello');
            // 获取索引号为偶数的元素
            $('ul li:even').css('color', 'orange');
        })

        // 筛选方法 -- 选取父子元素
        // $(function() {
            // 1. 查找父级 parent() 返回最近一级的父级元素
            // $('.son').parent();
            // 2. 儿子
            // 2.1 亲儿子  children() 子代选择器  ul>li
            // $('.nav').children('p').css('color','white');
            // 2.2 可以选里面所有的孩子  包括儿子和孙子  find()  类似后代选择器
            // $('.nav').find('p').css('color', 'red');   //如果里面没有参数，则选择所有选择器
        // })

        // 筛选方法 -- 其他选取方法选取
        $(function() {
            // 1. 兄弟元素siblings  除了自身元素之外的所有亲兄弟
            $('ol .item').siblings('li').css('color', 'red');
            // 2. 第n个元素
            // 2.1 我们可以利用选择器方式选择
            $('ul li:eq(2)').css('color', 'blue');
            // 2.2 我们可以利用选择方式进行选择（更推荐）
            $('ul li:eq(2)').css('color', 'blue');
            // 3. 判断是否有某个类名
            console.log($('ul li').hasClass('item'));
            console.log($('ol li').eq(0).hasClass('item'));
        })
        
    </script>
</body>
</html>